<template>
    <div class="shop-footer">
      <section>
        <ul>
          <li class="shop-footer-item shop-footer-left">
            <mu-paper class="demo-paper" circle :zDepth="2">
              <img src="../../../../static/img/shopping_cart.png"/>
            </mu-paper>
            <p>未选购商品</p>
          </li>
          <li class="shop-footer-item shop-footer-right">
            ￥10元起送
          </li>
        </ul>
      </section>
    </div>
</template>

<script>
    export default {
        name: "shop-footer"
    }
</script>

<style scoped>
  .shop-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(64, 64, 64, 0.6);
    line-height: 90px;/*rem*/
  }
  .shop-footer section ul{
    display: flex;
  }
  .shop-footer-item{
    color: rgba(255, 255, 255, 0.6);
    position: relative;
  }
  .shop-footer-item .demo-paper{
    height: 100px;
    width: 100px;
    position: absolute;
    left: 20px;/*rem*/
    top: -20px;/*rem*/
    border: 10px solid rgba(64, 64, 64, 0.6);/*rem*/
    background-color: rgba(55, 55, 55, 1);
    padding: 15px;/*rem*/
  }
  .shop-footer-item .demo-paper img{
    height: 100%;
    width: 100%;
  }
  .shop-footer-left{
    font-size: 24px;/*rem*/
    display: flex;
    background-color: rgba(55, 55, 55, 0.4);
    flex: 1;
  }
  .shop-footer-left p{
    margin-left: 136px;/*rem*/
  }
  .shop-footer-right{
    font-size: 26px;/*px*/
    padding: 0 45px;/*rem*/
  }
</style>
